<template name="tabControl">
	<view>
		<view class="tabList"  v-if="from === 'shoucang'">
			<view :class="'tabItem' + (currentIndex == index ? ' thisOpenSelect' : '')" v-for="(item, index) in values" :id="'item' + index" :key="index" @click="_onClick(index)">
				<text>{{ item.title }}({{ item.num }})</text>
				<view class="activeLine"></view>
			</view>
		</view>
		<!-- :scroll-top="scrolltop" -->
		<scroll-view v-else scroll-x="true" :style="'background-color:' + bgc + ';'" :class="fixed ? 'fxied' : ''" :scroll-left="scrollLeft" scroll-with-animation id="tabcard">
			<view class="tabList">
				<view
					style="margin-top:20rpx;"
					:class="'tabItem' + (currentIndex == index ? ' thisOpenSelect' : '')"
					v-for="(item, index) in values"
					:id="'item' + index"
					:key="index"
					@click="_onClick(index)"
				>
					<text>{{ item.title }}({{ item.num }})</text>
					<view class="activeLine"></view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'tabControl',
	props: {
		current: {
			type: Number,
			default: 0
		},
		from: {
			type: String,
			default: ''
		},
		values: {
			type: Array,
			default() {
				return [];
			}
		},
		bgc: {
			type: String,
			default: ''
		},
		fixed: {
			type: Boolean,
			default: false
		},
		scrollFlag: {
			type: Boolean,
			default: false
		},
		lineWidth: {
			type: Number,
			default: 48
		},
		itemSize: {
			type: Number,
			default: 30
		},
		activeSize: {
			type: Number,
			default: 32
		},
		activeColor: {
			type: String,
			default: ''
		},
		top: {
			type: Number,
			default: 0
		},
		isEqually: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			scrolltop: 0,
			currentIndex: 0,
			windowWidth: 0, //设备宽度
			leftList: [], //选项距离左边的距离
			widthList: [], //选项宽度
			scrollLeft: 0, //移动距离
			newScroll: 0, //上一次移动距离(用来判断是左滑还是右滑)
			wornScroll: 0 //上一次移动距离(用来判断是左滑还是右滑)
		};
	},
	created() {
		if (this.from === 'shoucang') {
			this.scrolltop = '66rpx;';
		}
	},
	mounted() {
		setTimeout(() => {
			if (this.from !== 'shoucang') {
				uni.createSelectorQuery()
					.in(this)
					.select('#tabcard')
					.boundingClientRect(res => {
						this.$emit('getTabCardHeight', { height: res.height });
					})
					.exec();
			}
			uni.getSystemInfo({
				success: res => {
					this.windowWidth = res.windowWidth;
					// console.log(this.windowWidth);
					this.values.forEach((i, v) => {
						let info = uni.createSelectorQuery().in(this);
						info.select('#item' + v)
							.boundingClientRect(res => {
								// 获取第一个元素到左边的距离
								// if(v==0){
								// 	this.startLenght = res.left
								// }
								this.widthList.push(res.width);
								this.leftList.push(res.left);
							})
							.exec();
					});
					// console.log(this.leftList)
					// console.log(this.widthList)
				}
			});
		});
	},
	created() {
		this.currentIndex = this.current;
		if (this.scrollFlag) {
			setTimeout(() => {
				this.tabListScroll(this.current);
			}, 300);
		}
	},
	watch: {
		current(val) {
			if (val !== this.currentIndex) {
				this.currentIndex = val;
				if (this.scrollFlag) {
					this.tabListScroll(val);
				}
			}
		}
	},
	methods: {
		_onClick(index) {
			if (this.currentIndex !== index) {
				this.currentIndex = index;
				this.$emit('clickItem', { currentIndex: index });
				// 开启滚动
				if (this.scrollFlag) {
					this.tabListScroll(index);
				}
			}
		},
		// 选项移动
		tabListScroll(index) {
			let scoll = 0;
			this.wornScroll = index;
			// this.wornScroll-this.newScroll>0 在向左滑  ←←←←←
			if (this.wornScroll - this.newScroll > 0) {
				for (let i = 0; i < this.leftList.length; i++) {
					if (i > 1 && i == this.currentIndex) {
						scoll = this.leftList[i - 1];
					}
				}
				// console.log('在向左滑',scoll)
			} else {
				if (index > 1) {
					for (let i = 0; i < this.leftList.length; i++) {
						if (i < index - 1) {
							scoll = this.leftList[i];
						}
					}
				} else {
					scoll = 0;
				}
				// console.log('在向右滑')
			}
			this.newScroll = this.wornScroll;
			this.scrollLeft = scoll;
		}
	}
};
</script>

<style lang="less" scoped>
.fxied {
	//margin: 20rpx 0;
	position: fixed;
	width: 100%;
	z-index: 999;
	// top: 86rpx;
}
.tabList {
	flex-direction: row;
	align-items: center;
	justify-content: center;
	text-align: center;
	// margin-top: 52rpx;
	// position: fixed;
	// top: 66rpx;
	z-index: 999;
	background-color: #fff;
	width: 100%;
	.tabItem {
		position: relative;
		width: 50%;
		float: left;
		text {
			font-size: 32rpx;
			line-height: 44rpx;
			color: #666;
			transition: all 0.3s ease 0s;
		}
		.activeLine {
			border: 1px solid #fff;
			margin-top: 20rpx;
		}
	}
	.thisOpenSelect {
		text {
			color: #2d67e0;
			font-size: 32rpx;
		}
		.activeLine {
			border: 1px solid #2d67e0;
			color: #2d67e0;
			margin-top: 20rpx;
			margin-left: 50%;
			transform: translateX(-50%);
			transition: all 0.3s ease 0s;
		}
	}
}
</style>
